<template>
  <component :is="componentName" v-bind="$attrs">
    <template #text="{ percent }">
      <slot name="text" :percent="percent"> {{ percent }}% </slot>
    </template>
  </component>
</template>

<script>
  export default {
    name: 'VcProgress',
  };
</script>
<script setup>
  import { ref, watchEffect, defineProps, markRaw } from 'vue';
  import Basic from './Basic.vue';
  import Grid from './Grid.vue';
  import Circle from './Circle.vue';
  import VerGrid from './VerGrid.vue';
  import Ring from './BasicRing.vue';
  import Dashboard from './Dashboard.vue';
  const props = defineProps({
    type: {
      type: String,
      default: 'basic',
    },
  });
  const components = {
    basic: Basic,
    grid: Grid,
    circle: Circle,
    verGrid: VerGrid,
    ring: Ring,
    dashboard: Dashboard,
  };
  const componentName = ref();
  watchEffect(() => {
    if (props.type) componentName.value = markRaw(components[props.type]);
  });
</script>

<style lang="less" scoped></style>
